<template>
	<view class="container">
		<view class="title">缴纳保证金</view>
		<view class="explain">
			您申请成为金牌陪宠师，需缴纳{{deposit}}元保证金（可在注 销陪宠师后退还。
		</view>
		<!-- <view class="title">选择支付方式</view>
		<view class="wx" @click="selectLei(0)">
			<view>
				<image :src="url+'icon-39.png'"></image><text>微信支付</text>
			</view>
			<image :src="url+ (select==0?'icon-13.png':'icon-12.png')" mode=""></image>
		</view>
		<view class="wx zfb" @click="selectLei(1)">
			<view>
				<image :src="url+'icon-40.png'"></image><text>支付宝支付</text>
			</view>
			<image :src="url+ (select==1?'icon-13.png':'icon-12.png')" mode=""></image>
		</view> -->
		<view @click="pay" class="btn">确定缴纳 {{deposit}}元</view>
		<view class="buChong" @click="toOpenStudio(1)">暂不缴纳，成为普通陪宠师</view>
		<paymentPopup ref="paymentPopupRef" @confirm="checkout" @fail="failToPay"></paymentPopup>
	</view>
</template>

<script setup>
	import { payment } from '@/hooks/usePay'
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	const deposit = ref('');
	const selectOpeningType = ref()
	onLoad((e)=>{
		deposit.value = e.deposit
		selectOpeningType.value = e.selectOpeningType
	})
	const flay = ref(true)
	const paymentPopupRef = ref(null)
	const pay = async() =>{
		if(!flay.value) return
		flay.value = false
		
		// #ifdef MP-TOUTIAO
		const res = await payment({orderId:'', payBusinessType:'2', payType:'1'})
		if(res){
			toOpenStudio()
		}else{
			flay.value = true
		}
		// #endif
		// #ifndef MP-TOUTIAO
		 paymentPopupRef.value.open({
			orderId: '',
			payAmount: deposit.value,
			payBusinessType: 2,
			checkOrderType:'currentCreateProgress'
		});
		// #endif
	}
	const toOpenStudio = (num) =>{
		flay.value = true
		uni.reLaunch({
			url:`/pages/applyLookAfterPet/openStudio/openStudio?deposit=${deposit.value}&selectOpeningType=${num?'0':'1'}`
		})
	}
	const checkout = async () =>{
		uni.navigateTo({
			url:`/pages/applyLookAfterPet/openStudio/openStudio?selectOpeningType=1&deposit=${deposit.value}`
		})
	}
	const failToPay = () =>{
		uni.showToast({
			icon: 'none',
			title: '暂未付款'
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		line-height: 1;
		padding: 50rpx 32rpx;
		box-sizing: border-box;
		background-color: #F9F6F6;

		.title {
			color: #1A1A1A;
			font-size: 36rpx;
			font-weight: bold;
		}

		.explain {
			color: #808080;
			font-size: 28rpx;
			line-height: 28rpx;
			margin: 32rpx 0 100rpx;
		}

		.wx {
			padding: 48rpx 32rpx;
			margin-top: 48rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			@include flex(center, space-between);

			>image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				color: #1B2120;
				font-size: 32rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}
			}
		}

		.zfb {
			margin-top: 24rpx;
		}

		.btn {
			width: 100%;
			height: 88rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 62rpx;
			margin: 48rpx 0 32rpx;
			@include flex(center, center);
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
		}

		.buChong {
			color: #5C5E5E;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>